<template>
  <div class="exclusive">
    <van-sticky>
     <van-nav-bar title="管理员专属" @click-right='rightSidebar'>
       <template #right>
         <van-icon name='ellipsis' size='18'></van-icon>
       </template>
     </van-nav-bar>
    </van-sticky>
    <!-- Echart 图像显示 -->
    <van-row>
      <van-col span='24'>
        <div class="echart-table-01" style="height: 400px"></div>
      </van-col>
    </van-row>
    <van-row>
      <van-col span='24'>
        <div class="echart-table-02" style="height: 400px"></div>
      </van-col>
    </van-row>
    <van-row>
      <van-col span='24'>
        <div class="echart-table-03" style="height: 400px"></div>
      </van-col>
    </van-row>
    <!-- 侧边栏 -->
    <van-popup v-model="show" :overlay='false' position="right" class="right-sidebar" >
      <van-button type="primary" size="large" to='category'>栏目管理</van-button>
      <van-button type="primary" size="large" to='article'>文章管理</van-button>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Exclusive',
  created() {
    if(this.$store.state.token != 'admin') {
      this.$router.push({name: 'home'})
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      show: false
    };
  },
  mounted() {
    // 统计文章浏览量, select views from cms_article
    this.drawLine('.echart-table-01', {
        title: {
          text: '文章浏览数据'
        },
        tooltip: {},
        legend: {
          data:['文章浏览量']
        },
        xAxis: {
          data: ["这是第一篇文章","PHP微信公众平台开发","要想提高效率的49个要点",
                 "PHPer必备","Bootstrap从入门到精通","MySQL手册免费分享",
                 "演员的自我修养"],
          show: false
        },
        yAxis: {},
        series: [{
          name: '文章浏览量',
          type: 'bar',
          data: [4, 2, 3, 1, 1, 1, 0]
        }]
      })
    // 统计栏目文章数据, 通过 MySQL 的统计语句获取
    this.drawLine('.echart-table-02', {
        title: {
          text: '栏目文章数据'
        },
        color: '#91cc75',
        tooltip: {},
        legend: {
          data:['文章数量']
        },
        xAxis: {
          data: ["生活","资讯","编程",
                 "互联网","科技"],
          show: false
        },
        yAxis: {},
        series: [{
          name: '文章数量',
          type: 'bar',
          data: [5, 1, 1, 0, 0]
        }]
      })
    // 使用原型图展示付费/免费占比, 通过 MySQL 的统计语句获取
    this.drawLine('.echart-table-03', {
      title: {
        text: '付费占比'
      },
      tooltip: {
          trigger: 'item'
      },
      legend: {
          top: '5%',
          left: 'center'
      },
      color: ['#ee6666', '#73c0de'],
      series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
            show: false
        },
        data: [
          { value: 2, name: '付费'},
          { value: 5, name: '免费'}
        ]
      }
    ]
    })
  },
  methods: {
    // 弹出右边的侧边栏
    rightSidebar() {
      this.show = !this.show
    },
    // 暂时使用函数的形式构建, 最优解应该为公共组件
    drawLine(className, options = {}){
      // console.log(this.$echarts.init)
      let myChart = this.$echarts.init(document.querySelector(className))
      myChart.setOption(options)
    }
  }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
.exclusive {
  margin-bottom: 80px;
}
.right-sidebar {
  width: 40vw;
  height: calc(100vh - 46px - 46px);
}
</style>
